<template>
	<view>	
		<view class="peisong">
			<view class="justify-between">
				<text>设备序列号</text>
				<view>{{orderInfo.serialNumber}}</view>
			</view>
			<view class="justify-between" style="margin: 20px 0;">
				<text>物流单号</text>
				<view>{{orderInfo.trackingNumber}}</view>
			</view>
			<view class="justify-between">
				<text>相关协议</text>
				<view style="color: #ED7D3D;display: flex;justify-content: space-between;">查看协议<u-icon name="arrow-right" size="28"></u-icon></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMore: false
			}
		},
		props: {orderInfo:{}},
	}
</script>

<style scoped lang="scss">
	.box {
		width: 200px;
		height: 10px;
	}

	.box-title {
		font-size: 20px;
	}

	.box-:hover {
		background-color: red;
	}

	.box .text {
		background-color: pink;
	}

	.nav {
		padding: 40px 20px;
		background-color: rgba(255, 110, 19, 1);
		color: white;
	}

	.nav h4,
	.nav div,
	.nav i {
		flex-grow: 1;
	}

	.nav h4 {
		text-align: center;
	}

	.person {
		/* width: 375px; */
		margin: 10px;
		background-color: #fff;
		padding: 10px;
		align-items: center;
	}

	.person-icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 使原图不受挤压 */
		flex-shrink: 0;
	}

	.person-info {
		font-size: 15px;
		color: #262626;
	}

	.person-info span:last-child {
		margin-left: 20px;
	}

	.person-address {
		font-size: 12px;
		line-height: 18px;
		color: #333;
	}

	/* 商品信息 */
	.goods {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.goods img:first-child {
		width: 85px;
		height: 85px;
	}

	.goods-info {
		height: 35px;
		font-size: 13px;
		line-height: 19px;
		color: #262626;
		/* 溢出隐藏，省略号 */
		overflow: hidden;
		/* 文本超出给予省略号 */
		text-overflow: ellipsis;
		/* 溢出不换行 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		-webkit-line-clamp: 2;
	}

	.goods-tag {
		margin: 10px 0;
	}

	.goods-tag span {
		font-size: 11px;
		color: #888;
		background-color: rgb(246, 247, 247);
	}

	.goods-price-icon {
		font-size: 9px;
		color: red;
	}

	.goods-price-num {
		font-size: 16px;
		color: red;
	}

	.line-through {
		text-decoration: line-through;
	}

	.gray {
		color: #888;
	}

	.goods-price p:last-child {
		margin-left: 10px;
	}

	/* 配送 */
	.peisong {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		font-size: 13px;
		color: #262626;
		letter-spacing: 1px;
	}

	.peisong-item {
		margin: 20px 0;
	}

	.peisong-tips {
		font-size: 12px;
		color: #989898;
		margin-left: 20px;
		/* 溢出省略显示省略号一行显示 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 20px;
	}

	/* 总价 */
	.zongjia {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		font-size: 13px;
		color: #262626;
		letter-spacing: 1px;
	}

	.zhekou {
		color: red;
	}

	.zongjia-yunfei {
		margin: 20px 0;
	}

	/* 合计支付 */
	.toPay {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background-color: #fff;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.toPay span:first-child {
		font-size: 11px;
		letter-spacing: 1px;
		line-height: 19px;
		color: #1e1e1e;
	}

	.toPay span:last-child {
		font-size: 13px;
		line-height: 19px;
		color: #cf4444;
		font-weight: 600;
	}

	.toPay-btn {
		width: 90px;
		height: 35px;
		border-radius: 3px;
		background-color: rgba(255, 110, 19, 1);
		font-size: 13px;
		text-align: center;
		line-height: 35px;
		color: #fff;
	}

	.flex1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-icon {
		border-bottom: 1px solid #E4E7ED;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.nav-status {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.supplement {
		background-color: #409EFF;
		color: white;
		font-size: .9em;
		padding: 5px 15px;
		border-radius: 15px;
	}

	.description {
		color: white;
		font-size: 1em;
		margin-top: 20px;
	}

	.discount-class {
		background-color: rgba(237, 125, 61, 0.0705882352941176);
	}

	.zhimatip {
		border: 1px solid #rgba(255, 110, 19, 1);
		border-radius: 15px;
		color: rgba(255, 110, 19, 1);
	}

	.rent-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.rent-time-item {
		width: 40%;
		text-align: center;
	}

	.time-name {
		font-weight: bold;
		font-size: 1.1em;
	}

	.time-data {
		font-size: .9em;
		color: #C0C4CC;
		padding-top: 15px;
	}




	.common-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.trangle {
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 20rpx solid #ddd;
		transform: rotate(0deg);
		transition: all 0.5s;
	}

	.collapse-box {
		margin-bottom: 20px;
		.collapse {
			width: 690rpx;
			background-color: rgba(242, 242, 242, 1);

			/* 通用留白边box */
			.basic-box {
				width: 100%;
				margin: 20rpx auto 0;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 30rpx;
			}

			.data-content {
				margin-top: 30rpx;
				color: #0e0e0f;
				text-align: center;
			}
		}


		.trangle-develop {
			transform: rotate(180deg);
			transition: all 0.5s;
		}

		/* 滑动展开 (说明:此处不设置高度，在原盒子加一个class名设置展开高度) */
		.develop {
			overflow: hidden;
			transition: all 0.5s;
		}

		/* 滑动收起 */
		.pack-up {
			overflow: hidden;
			height: 0 !important;
			transition: all 0.5s;
		}
	}
</style>